import { FC, memo, useRef, useState } from 'react';
import { Dropdown } from 'antd';
import GroupMenu from '@/page-compoennt/miner/moveToGroupAndMoreHandle/GroupMenu';
import { GroupPageModel } from '@/service/group';
import GroupMoveModal from '@/page-compoennt/miner/moveToGroupAndMoreHandle/GroupMoveModal';
import { MenuInfo } from 'rc-menu/es/interface';
import { TaskParams } from '@/types/task';
import UseGroupConfigModal from '@/page-compoennt/miner/moveToGroupAndMoreHandle/UseGroupConfigModal';

interface IGroupDropDownProps {
  containerId: string;
  groupModel: GroupPageModel | undefined;
  miners: string[];
  children: any;
  mutateMiner: () => void;
}

const GroupDropDown: FC<IGroupDropDownProps> = (props) => {
  const [groupMoveModalVisible, setGroupMoveModalVisible] = useState(false);
  const [useGroupConfigModalVisible, setUseGroupConfigModalVisible] =
    useState(false);

  const paramsRef = useRef<TaskParams>();

  const openGroupMoveModal = (info: MenuInfo) => {
    const { monitor: _monitor, gid: _gid, name } = JSON.parse(info.key);
    const monitor = parseInt(_monitor);
    const gid = parseInt(_gid);
    const params = {
      name,
      gid,
      monitor,
      miners: props.miners,
    };

    paramsRef.current = params;
    setGroupMoveModalVisible(true);
  };

  const groupMenu = (
    <GroupMenu
      miners={props.miners}
      openGroupMoveModal={openGroupMoveModal}
      groupModel={props.groupModel}
      onClick={openGroupMoveModal}
    />
  );
  return (
    <>
      <Dropdown
        trigger={['click']}
        overlay={groupMenu}
        getPopupContainer={() => document.getElementById(props.containerId)!}
        placement="topCenter"
      >
        {props.children}
      </Dropdown>
      <GroupMoveModal
        mutateMiner={props.mutateMiner}
        visible={groupMoveModalVisible}
        setVisible={setGroupMoveModalVisible}
        setUseGroupConfigModalVisible={setUseGroupConfigModalVisible}
        paramsRef={paramsRef}
      />
      <UseGroupConfigModal
        mutateMiner={props.mutateMiner}
        visible={useGroupConfigModalVisible}
        setVisible={setUseGroupConfigModalVisible}
        paramsRef={paramsRef}
      />
    </>
  );
};

export default memo(GroupDropDown);
